<template>
  <el-table :data="list" style="width: 100%">
    <el-table-column prop="id" label="活动记录id" />
    <el-table-column prop="uid" label="领取人" />
    <el-table-column prop="money" label="套餐价格" />
    <el-table-column prop="moneyStatus" label="收入支出" v-slot="scope">
      <span>{{ scope.row.status == 1 ? '支出' : '' }}</span>
      <span>{{ scope.row.status == 2 ? '收入' : '' }}</span>
    </el-table-column>
    <el-table-column prop="status" label="状态" v-slot="scope">
      <span>{{ scope.row.status == 1 ? '电卡' : '' }}</span>
      <span>{{ scope.row.status == 2 ? '套餐' : '' }}</span>
      <span>{{ scope.row.status == 3 ? '押金' : '' }}</span>
    </el-table-column>
    <el-table-column prop="remark" label="备注" />
    <el-table-column prop="site" label="站点" />
  </el-table>

  <el-pagination
    v-model:current-page="pageParamsForm.page"
    v-model:page-size="pageParamsForm.limit"
    :page-sizes="[2, 4, 6, 8]"
    layout="total, sizes, prev, pager, next"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { getscarifylist } from '@/api/activity'
import { ElMessage, ElMessageBox } from 'element-plus'
// 定义提交表单数据模型
const brand = ref({
  id: null,
})
//   const brand = ref(defaultForm)
const dialogVisible = ref(false)

//   显示添加品牌表单
const addShow = () => {
  brand.value = {}
  dialogVisible.value = true
}

//   图像上传成功以后的事件处理函数
const handleAvatarSuccess = (response, uploadFile) => {
  brand.value.imgs = response.data
}

// 定义表格数据模型
const list = ref([])

// 分页条数据模型
const total = ref('')
// 条件查询
// const cxName = ref('')
//分页条数据模型
const pageParamsForm = ref({
  page: 1, // 页码
  size: 3, // 每页记录数
})

// 钩子函数
onMounted(() => {
  fetchData()
})

//页面变化
const handleSizeChange = size => {
  pageParamsForm.value.size = size
  fetchData()
}
const handleCurrentChange = number => {
  pageParamsForm.value.page = number
  fetchData()
}

// 分页查询
const fetchData = async () => {
  const { data } = await getscarifylist(pageParamsForm.value)
  list.value = data.records
  total.value = data.total
}
</script>

<style scoped>
.tools-div {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}
</style>
